.why-we-are {
    /* background-color: red; */

    .content {
        > span {
            background-color: var(--sec);
            width: 80px;
            text-align: center;
            padding: 3px;
            font-size: 12.27px;
            font-weight: 700;
            margin-bottom: 24px;
        }

        p {
            font-size: 20px;
            font-weight: 300;
            letter-spacing: -0.25px;
        }
        .persentage {
            p {
                font-size: 80px;
                font-weight: 300;
                letter-spacing: -0.25px;
            }
            span {
                font-size: 16px;
                font-weight: 400;
            }
        }
    }
    .figure img {
        transition: all 0.3s;
        box-shadow: 3px 5px 10px rgba(128, 128, 128, 0.603);
        border-radius: 20px;
    }

    /* Tablet */
    @media (max-width: 1024px) {
        .content > span {
            font-size: 11px;
            width: 90px;
        }

        .content p {
            font-size: 18px;
        }

        .content .persentage p {
            font-size: 60px;
        }

        .content .persentage span {
            font-size: 14px;
        }
    }

    /* Mobile */
    @media (max-width: 768px) {
        .content > span {
            font-size: 10px;
            width: 80px;
        }

        .content p {
            font-size: 16px;
            line-height: 1.7;
        }

        .content .persentage p {
            font-size: 45px;
        }

        .content .persentage span {
            font-size: 13px;
        }
    }

    /* Small Mobile */
    @media (max-width: 480px) {
        .content > span {
            font-size: 9px;
            width: 70px;
        }

        .content p {
            font-size: 14px;
        }

        .content .persentage p {
            font-size: 35px;
        }

        .content .persentage span {
            font-size: 12px;
        }
    }
}
.why-we-are:hover .figure img {
    box-shadow: 0px 5px 40px rgba(128, 128, 128, 0.774);
    transform: translateY(-10px);
}

.figure img {
    transition: all 0.3s;
    box-shadow: 3px 5px 10px rgba(128, 128, 128, 0.603);
    border-radius: 20px;
}
.our-vision {
    .content {
        h2 {
            font-size: 48px;
            font-weight: 300;
            letter-spacing: -0.5px;
            margin-bottom: 40px;
        }
        p {
            font-size: 20px;
            font-weight: 300;
            letter-spacing: -0.25px;
        }
    }

    /* Tablet */
    @media (max-width: 1024px) {
        .content h2 {
            font-size: 38px;
            margin-bottom: 30px;
        }

        .content p {
            font-size: 18px;
        }
    }

    /* Mobile */
    @media (max-width: 768px) {
        .content h2 {
            font-size: 30px;
            margin-bottom: 20px;
        }

        .content p {
            font-size: 16px;
            line-height: 1.7;
        }
    }

    /* Small Mobile */
    @media (max-width: 480px) {
        .content h2 {
            font-size: 24px;
            margin-bottom: 15px;
        }

        .content p {
            font-size: 14px;
        }
    }
}

.our-message {
    .content {
        h2 {
            font-size: 48px;
            font-weight: 300;
            letter-spacing: -0.5px;
            margin-bottom: 40px;
        }
        p {
            font-size: 20px;
            font-weight: 300;
            letter-spacing: -0.25px;
        }
        span {
            font-size: 18px;
            font-weight: 300;
            letter-spacing: -0.25px;
        }
        .fa-circle {
            color: var(--sec);
        }
    }

    /* Tablet */
    @media (max-width: 1024px) {
        .content h2 {
            font-size: 38px;
            margin-bottom: 30px;
        }

        .content p {
            font-size: 18px;
        }

        .content span {
            font-size: 16px;
        }
    }

    /* Mobile */
    @media (max-width: 768px) {
        .content h2 {
            font-size: 30px;
            margin-bottom: 20px;
        }

        .content p {
            font-size: 16px;
            line-height: 1.7;
        }

        .content span {
            font-size: 14px;
            line-height: 1.6;
        }
    }

    /* Small Mobile */
    @media (max-width: 480px) {
        .content h2 {
            font-size: 24px;
            margin-bottom: 15px;
        }

        .content p {
            font-size: 14px;
        }

        .content span {
            font-size: 13px;
        }
    }
}

.ourCore {
    .title {
        span {
            background-color: var(--sec);
            /* width: 120px; */
            text-align: center;
            padding: 3px;
            font-size: 12.27px;
            font-weight: 700;
        }
        p {
            font-weight: 300;
            font-size: 20px;
            letter-spacing: -0.25px;
            margin-top: 24px;
        }
    }

    .values {
        .value {
            .label {
                span {
                    font-size: 24px;
                    font-weight: 300;
                    letter-spacing: -0.25px;
                    color: var(--third);
                }
                p {
                    font-size: 48px;
                    font-weight: 300;
                    letter-spacing: -0.5px;
                    color: var(--sec);
                }
            }
            .description {
                font-size: 20px;
                font-weight: 300;
                letter-spacing: -0.25px;
                color: var(--third);
            }
        }
    }

    /* Tablet */
    @media (max-width: 1024px) {
        .title span {
            font-size: 11px;
        }

        .title p {
            font-size: 18px;
        }

        .values .value .label span {
            font-size: 20px;
        }

        .values .value .label p {
            font-size: 36px;
        }

        .values .value .description {
            font-size: 18px;
        }
    }

    /* Mobile */
    @media (max-width: 768px) {
        .title span {
            font-size: 10px;
        }

        .title p {
            font-size: 16px;
            line-height: 1.7;
        }

        .values .value .label span {
            font-size: 18px;
        }

        .values .value .label p {
            font-size: 28px;
        }

        .values .value .description {
            font-size: 16px;
            line-height: 1.6;
        }
    }

    /* Small Mobile */
    @media (max-width: 480px) {
        .title span {
            font-size: 9px;
        }

        .title p {
            font-size: 14px;
        }

        .values .value .label span {
            font-size: 16px;
        }

        .values .value .label p {
            font-size: 22px;
        }

        .values .value .description {
            font-size: 14px;
        }
    }
}

.why-we-are:hover .figure img {
    box-shadow: 0px 5px 40px rgba(128, 128, 128, 0.774);
    transform: translateY(-10px);
}
.our-vision:hover .figure img {
    box-shadow: 0px 5px 40px rgba(128, 128, 128, 0.774);
    transform: translateY(-10px);
}
.our-message:hover .figure img {
    box-shadow: 0px 5px 40px rgba(128, 128, 128, 0.774);
    transform: translateY(-10px);
}